<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationStyle: 'default',
    navigationBarTitleText: '我的订单',
  },
}
</route>
<template>
  <view class="content-warp">
    <view class="tab-warp">
      <view
        @click="tabClick(item)"
        v-for="(item, index) in tabList"
        :key="index"
        :class="params.type === item.value ? 'active' : 'undeactive'"
      >
        {{ item.label }}
      </view>
    </view>
    <view class="content">
      <div class="w-full pos-relative z-10 text-[14px]">
        <template v-for="item in list" :key="item.id">
          <div
            class="w-full bg-white rounded-[10px] box-border p-4 mb-4 pos-relative shadow-lg-1"
            v-if="item.state === 1"
          >
            <div class="flex flex-col gap-4">
              <div class="tag text-white px-2 py-1 text-[14px] bg-[#56b756] rounded-1 w-fit" v-if="item.pay_type === 1">
                <!-- {{ item.pay_type === 1 ? '免费' : item.pay_type === 2 ? '付费' : '其他' }} -->
                免费
              </div>
              <div class="text-[14px]">
                <span class="text-[#666666] mr-4">{{ item.ns_member_name }}</span>
                <span class="text-[#333333] mr-4">
                  {{ item.state === 1 ? '已联系' : '未联系' }}
                </span>
              </div>
              <!-- 手机号 -->
              <div class="text-[#666666] text-[14px]">
                {{ item.ns_member_mobile }}
              </div>
              <!-- 地址 -->
              <div class="text-[#666666] text-[14px]">{{ item.ns_member_address }}</div>
              <!-- 备注 -->
              <div class="text-[#666666] text-[14px] line-clamp-1">
                {{ item.mark }}
              </div>
            </div>
            <div class="pos-absolute right-4 top-4 text-right">
              <div class="text-[#56B756] mb-4 font-600">{{ item.service_title }}</div>
              <div class="text-[#999999]">2024-12-03</div>
            </div>
          </div>
          <div
            class="w-full bg-white rounded-[10px] box-border p-4 mb-4 pos-relative shadow-lg-1"
            v-else
          >
            <div class="flex flex-col gap-4">
              <!-- <div class="tag text-white px-2 py-1 text-[14px] bg-[#56b756] rounded-1 w-fit">免费</div> -->

              <div class="tag text-white px-2 py-1 text-[14px] bg-[#56b756] rounded-1 w-fit" v-if="item.pay_type === 1">
                <!-- {{ item.pay_type === 1 ? '免费' : item.pay_type === 2 ? '付费' : '其他' }} -->
                免费
              </div>
              <div class="text-[14px]">
                <span class="text-[#666666] mr-4">{{ nameDesensitization(item.ns_member_name) }}</span>
                <span class="text-[#56B756] mr-4">未联系</span>
              </div>
              <!-- 手机号 -->
              <div class="text-[#666666] text-[14px]">
                {{ phoneDesensitization(item.ns_member_mobile) }}
              </div>
              <!-- 地址 -->
              <div class="text-[#666666] text-[14px]">{{ addressDesensitization(item.ns_member_address) }}</div>
              <!-- 备注 -->
              <!--          <div class="text-[#666666] text-[14px]">备注备注备注备注备注备注备注备注备注********</div>-->
              <!-- 去联系 -->
              <div
                @click="handleItem(item)"
                class="w-1/2 mx-auto text-center rounded-1 font-bold text-white bg-[#56B756] box-border py-2"
              >
                去联系
              </div>
            </div>
            <div class="pos-absolute right-4 top-4 text-right">
              <div class="text-[#56B756] mb-4 font-600">{{ item.service_title }}</div>
              <div class="text-[#999999]">2024-12-03</div>
            </div>
          </div>
        </template>
      </div>
    </view>
    <!-- 知晓确认对话框 -->
    <NsOverlay
      v-model:visible="visible"
      height="462rpx"
      footerTop="40rpx"
      okText="我已知晓"
      cancelText="立即取消"
      @ok="onPay"
    >
      <div class="text-center tip-text" style="padding-top: 68rpx; line-height: 48rpx">
        <div class="mt-5 w-4/5 mx-auto text-[#666]">{{ contactExplain }}</div>
      </div>
    </NsOverlay>
    <!-- 需求报送表单 -->
    <wd-action-sheet v-model="show">
      <div class="pt-7.5 pb-3 bg-[#fff]">
        <div class="info px-4">
          <div class="flex justify-between items-center text-[16px] text-[#666666] mb-5">
            <div>姓名</div>
            <div class="text-[#333]">{{ currentRow?.ns_member_name }}</div>
          </div>
          <div class="flex justify-between items-center text-[16px] text-[#666666] mb-5">
            <div>电话</div>
            <div class="text-[#333]">{{ currentRow?.ns_member_mobile }}</div>
          </div>
        </div>
        <wd-form ref="form" :model="model">
          <wd-cell-group>
            <div class="form-item pb-8">
              <div
                class="form-label form-label-required text-[#666] text-[16px]"
                style="margin-left: 32rpx"
              >
                备注信息
              </div>
              <div class="form-value">
                <wd-textarea
                  label=""
                  label-width="100px"
                  prop="content"
                  custom-textarea-class="feedback-textarea"
                  :maxlength="200"
                  v-model="model.content"
                  placeholder="请输入您的建议..."
                  :clearable="false"
                  :rules="[{ required: true, message: '请填写备注信息' }]"
                />
              </div>
            </div>
          </wd-cell-group>
        </wd-form>
        <div class="confirm" @click="handleSubmit">确认提交</div>
      </div>
    </wd-action-sheet>
  </view>
</template>

<script lang="ts" setup>
import PLATFORM from '@/utils/platform'
import NsOverlay from '@/components/ns-overlay.vue'
import {getContactExplain, getOrderList, getServiceType, payOrder, toContact} from '@/service/user'
import { onReachBottom } from '@dcloudio/uni-app'
import {useToast} from "wot-design-uni";

defineOptions({
  name: 'Home',
})
const toast = useToast()
const tabList = ref([
  {
    label: '全部订单',
    value: '',
  },
  {
    label: '免费订单',
    value: '1',
  },
  {
    label: '付费订单',
    value: '2',
  },
])
const tabClick = (item: Record<string, any>) => {
  params.type = item.value
  params.page = 1
  getList()
}
const searchValue = ref('')
const isActive = ref(0)
// 获取屏幕边界到安全区域距离
function handelGoperson() {
  uni.navigateTo({
    url: '../user/center/index',
  })
}

const visible = ref(false)

const show = ref(false)

// 我已知晓
function onKnow() {
  show.value = true
}
// 支付成功
const payInfo = ref<RPayOrder>()
async function onPay() {
  if (currentRow.value.pay_type === 2 && currentRow.value.is_pay !== 1) {
    // 支付接口
    const res: IResData<RPayOrder> = await payOrder(currentRow.value.id)
    if (res.code === 1) {
      payInfo.value = res.data
      console.log(res.data, 'onPay')
      visible.value = false
      uni.requestPayment({
        provider: 'wxpay',
        ...res.data,
        orderInfo: {
          ...res.data,
        },
        success: (res) => {
          toast.success('支付成功')
          getList()
          show.value = true
        },
      })
    } else {
      toast.show(res.msg)
    }
  } else {
    show.value = true
  }
}
const model = reactive<{
  // 内容
  content: string
}>({
  content: '',
})

const form = ref()

function handleSubmit() {
  // console.log(form.value);

  form.value
    .validate()
    .then(async ({ valid, errors }) => {
      if (valid) {
        const submitParams = {
          id: currentRow.value?.id,
          mark: model.content,
        }
        const res: IResData<any> = await toContact(submitParams)
        if (res.code === 1) {
          toast.success('提交成功')
          show.value = false
          visible.value = false
          model.content = ''
          params.page = 1
          await getList()
        } else {
          toast.show(res.msg)
        }
      }
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}
const params = reactive<IOrderList>({
  page: 1,
  limit: 10,
  type: '',
})
const list = ref<ROrder[]>([])
// eslint-disable-next-line camelcase
const last_page = ref<number>(0)
const getList = async () => {
  const res: IResData<ROrderData> = await getOrderList(params)
  if (res.code === 1) {
    // eslint-disable-next-line camelcase
    last_page.value = res.data.last_page
    list.value = params.page === 1 ? res.data.data : list.value.concat(res.data.data)
  }
}
const currentRow = ref<ROrder>()
const handleItem = (row: ROrder) => {
  console.log(row, 'row')
  currentRow.value = row
  visible.value = true
}
// 手机号脱敏
const phoneDesensitization = (phone: string) => {
  return phone.replace(/(\d{3})\d{8}/, '$1********')
}
const addressDesensitization = (address: string) => {
  return address.replace(/(\S{3})\S*/, '$1********')
}
const nameDesensitization = (name: string) => {
  return name.replace(/(\S{0})\S*/, '$1**')
}
// 服务类型
const serviceTypes = ref<RServiceType[]>([])
const getServiceTypes = async () => {
  const res: IResData<RServiceType[]> = await getServiceType()
  if (res.code === 1) {
    serviceTypes.value = res.data
  }
}
const serviceType = (type: string) => {
  let result = ''
  const RServiceType = type ? JSON.parse(type) : []
  result = serviceTypes.value
    .filter((item) => RServiceType.includes(item.id))
    .map((item) => item.title)
    .join(' ')
  return result
}
// 联系说明
const contactExplain = ref<string>('')
const getExplain = async () => {
  const res: IResData<RContact> = await getContactExplain()
  if (res.code === 1) {
    contactExplain.value = res.data.content
  }
}
onReachBottom(() => {
  // eslint-disable-next-line camelcase
  if (params.page < last_page.value) {
    params.page++
    getList()
  }
})
// 测试 uni API 自动引入
onLoad(async () => {
  await getServiceTypes()
  await getList()
  await getExplain()
})
</script>

<style scoped lang="scss">
.content-warp {
  background-color: #f7f7f7;
  min-height: 100vh;

  .tab-warp {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 37px;
    padding: 0 2px;

    .undeactive {
      /* 自动布局子元素 */
      /* 自动布局 */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 7px 16px;
      flex-grow: 1;
      margin: 0px -1px;
      z-index: 1;
      opacity: 1;
      box-sizing: border-box;
      border: 1px solid #6bb748;
      color: #6bb748;
      border-right: none;
    }

    .undeactive:last-child {
      border-right: 1px solid #6bb748;
    }

    .active {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 7px 16px;
      flex-grow: 1;
      margin: 0px -1px;
      z-index: 1;
      opacity: 1;
      border-radius: 2px;
      opacity: 1;
      box-sizing: border-box;
      background: #6bb748;
      border: 1px solid #6bb748;
      color: #ffffff;
    }
  }

  .content {
    padding: 15px;
  }
}

.main-title-color {
  color: #d14328;
}

:deep(.wd-input) {
  @apply w-[90%];
}

.form-label {
  margin-bottom: 20rpx;
}
.form-label-required {
  position: relative;
  padding-left: 8px;
}

.form-label-required::before {
  content: '*';
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 12px;
  color: #f61515;
}

.form-value {
  position: relative;
  background-color: #f7f7f7;
}

:deep(.wd-textarea__value) {
  height: 268rpx !important;
  background-color: #f7f7f7 !important;
}

:deep(.feedback-textarea) {
  padding: 16rpx 20rpx !important;
  height: 268rpx !important;
  background-color: #f7f7f7 !important;
  border-radius: 8px !important;
}

:deep(.wd-textarea__value) {
  border-radius: 16rpx;
}

:deep(.wd-textarea__suffix) {
  display: none;
}

.confirm {
  border-radius: 4px;
  background: #56b756;
  margin: auto;
  width: 690rpx;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
</style>
